$def with()
$# /developers/design
$ _x = ctx.setdefault('bodyid', 'design')

<div class="design-pattern-library">
  <h1>Design Pattern Library</h1>
  <article class="design-pattern">
    <h2>Fonts</h2>
    <hr/>
    <h3>Font-size</h3>
    <section>
      <h1>h1.</h1>
      <h2>h2.</h2>
      <h3>h3.</h3>
      <h4>h4.</h4>
    </section>

    <h3>Font-family</h3>
    <section>
      <li class="sansserif">Sans-serif: Verdana</li>
      <li class="serif">Serif: Georgia</li>
    </section>
  </article>

  <article class="design-pattern">
    <h2>Colors</h2>
    <hr/>
    <h3>Defaults</h3>
    <section>
      <ul class="color-swatch">
        <li><span class="color-block color-block-background"></span> Background</li>
        <li><span class="color-block color-block-primary-cta"></span> Primary Call To Action</li>
        <li><span class="color-block color-block-link-unclicked"></span> Link (unclicked)</li>
        <li><span class="color-block color-block-link-clicked"></span> Link (clicked)</li>
      </ul>
    </section>
  </article>
</div>
